<template>
  <el-dialog class="public-dialog" :title="title" width="520" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <XForm ref="form" :formData="formData" :fieldList="fieldList" :options="formOption" :rules="rules">
      <template #Week>
        <el-select v-model="formData.week_start" style="width: 100px" class="w-[100px] mr-[4px]" placeholder="请选择" @change="weekChange($event, 'week_end')">
          <el-option v-for="item in weekOpt" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        -
        <el-select v-model="formData.week_end" style="width: 100px" class="w-[100px] ml-[4px]" placeholder="请选择" @change="weekChange($event, 'week_start')">
          <el-option v-for="item in weekOpt" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </template>

      <!-- <template #Day> 天 </template> -->
    </XForm>
    <template #footer>
      <el-button @click="handleClose(false)"> 取消 </el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus"
import { stockingConfigList, stockingConfigCreate, stockingConfigEdit } from "@/api/base"
import XForm from "@/components/XForm/index.vue"
const modelValue = ref(false)
const emit = defineEmits(["refresh"])
const data = reactive({
  title: "详情",
  type: "",
  formData: {},
  loading: false,
})
const { title, type, formData, loading } = toRefs(data)

const handleClose = (refresh = false) => {
  modelValue.value = false
  formData.value = {}
  form?.value.resetForm()
  if (refresh) emit("refresh")
}
const open = (params = {}) => {
  title.value = params.title
  type.value = params.type
  if (params.type == "edit") {
    // console.log(params.row)
    params.row.year = String(params.row.year)
    let keys = [...fieldList.value.map((v) => v.field), "week_end", "id"]
    keys.forEach((key) => {
      formData.value[key] = params.row[key] || ""
    })
    // console.log(params.row)
    formData.value = params.row
  }
  modelValue.value = true
}
const handleSave = async () => {
  // console.log(formData.value)
  try {
    let api = null
    switch (type.value) {
      case "add":
        api = stockingConfigCreate
        break
      case "edit":
        api = stockingConfigEdit
        break
    }
    await form.value.submit()
    // let days = fieldList.value.filter((v) => v.append).map((v) => v.field)

    // days.forEach((k) => {
    //   formData.value[k] = Number(formData.value[k])
    // })
    api(formData.value).then((res) => {
      console.log(res)
      ElMessage.success(res.message)
      handleClose(true)
    })
  } catch (error) {
    console.warn(error)
  }
}
const weekChange = (e, key) => {
  if (key == "week_end") {
    formData.value.week_end = weekOpt.find((v) => v.value == e)?.endValue
  } else {
    formData.value.week_start = weekOpt.find((v) => v.endValue == e)?.value
  }
}
const weekOpt = [
  { label: "星期一", value: 1, endValue: 7 },
  { label: "星期二", value: 2, endValue: 1 },
  { label: "星期三", value: 3, endValue: 2 },
  { label: "星期四", value: 4, endValue: 3 },
  { label: "星期五", value: 5, endValue: 4 },
  { label: "星期六", value: 6, endValue: 5 },
  { label: "星期天", value: 7, endValue: 6 },
]

const formOption = {
  labelWidth: "120px",
  labelPosition: "top",
  inline: true,
}
const publicStyle = { style: { width: "120px" } }
const form = ref()
const fieldList = ref([
  { field: "week_start", label: "周维度", slot: "Week" },
  {
    field: "year",
    label: "年份",
    type: "dateTimeRangeNorm",
    itemProps: {
      type: "year",
      shortcuts: [],
      placeholder: "年份",
      valueFormat: "YYYY",
    },
    ...publicStyle,
  },
  { field: "state", type: "switch", label: "是否启用", itemProps: { activeValue: 1, inactiveValue: 0 } },
  { field: "january", label: "一月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "february", label: "二月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "march", label: "三月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "april", label: "四月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "may", label: "五月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "jane", label: "六月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "july", label: "七月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "august", label: "八月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "september", label: "九月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "october", label: "十月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "november", label: "十一月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
  { field: "december", label: "十二月", type: "inputNumber", ...publicStyle, append: "天", precision: 0 },
])
const rules = ref({
  week_start: [{ required: true, message: "请选择", trigger: "change" }],
  year: [{ required: true, message: "请选择", trigger: "change" }],
  january: [{ required: true, message: "请输入", trigger: "blur" }],
  february: [{ required: true, message: "请输入", trigger: "blur" }],
  march: [{ required: true, message: "请输入", trigger: "blur" }],
  april: [{ required: true, message: "请输入", trigger: "blur" }],
  may: [{ required: true, message: "请输入", trigger: "blur" }],
  jane: [{ required: true, message: "请输入", trigger: "blur" }],
  july: [{ required: true, message: "请输入", trigger: "blur" }],
  august: [{ required: true, message: "请输入", trigger: "blur" }],
  september: [{ required: true, message: "请输入", trigger: "blur" }],
  october: [{ required: true, message: "请输入", trigger: "blur" }],
  november: [{ required: true, message: "请输入", trigger: "blur" }],
  december: [{ required: true, message: "请输入", trigger: "blur" }],
  state: [{ required: true, message: "请输入", trigger: "blur" }],
})

defineExpose({ open })
</script>
<style lang="scss" scoped></style>
